<template>
	<section>
		<el-dialog :title="'空瓶回收审核'" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')">
			<el-form :disabled="mode == 'Show'" ref="dialogForm" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="单据类型：">空瓶回收</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="单据状态：">酒业待确认</el-form-item>
					</el-col>
					<el-col :span="5"></el-col>
					
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="申请编号：">{{entityObj.recoveryCode}}</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="申请单位：">{{entityObj.storeName}}</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="申请人：" label-width="140px">{{entityObj.applicant}}</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="申请时间：">{{entityObj.createTime}}</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="回收单位：">{{entityObj.purchaseUnityName}}</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="回收时间：">{{entityObj.recoveryTime}}</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="回收方式：">{{entityObj.recoveryTypeName}}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="期望上门回收时间：" label-width="140px">{{entityObj.expectedDate}}</el-form-item>
					</el-col>
					<!-- <el-col :span="5">
						<el-form-item label="邮寄收货单位">{{entityObj.storeName}}</el-form-item>
					</el-col> -->
				</el-row>
				<el-row style="margin-bottom: 10px;">
					<el-col :span="5">
						<el-form-item label="">
							<el-button type="primary" @click="addMaterial()">新增空瓶</el-button>
						</el-form-item>
					</el-col>
					
				</el-row>
				<el-row>
					<el-form-item label="空瓶清单：">

					</el-form-item>
					<el-form-item label="" label-width="0px">
						<el-table :data="entityObj.recoveryOrderItems" border style="width: 1360px" show-summary>
							<el-table-column label="操作" min-width="100">
									<template #default="scope">
										<el-button size="small" @click="deleteRow(scope.$index, scope.row)"
										v-if="scope.row.recoveryOrderItemId==null"
										>删除</el-button>
									</template>
								</el-table-column>
							<el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
							<el-table-column label="空瓶编码" min-width="120">
								<template #default="scope">{{ scope.row.materialCode }}</template>
							</el-table-column>
							<el-table-column label="空瓶名称" min-width="230">
								<template #default="scope">{{ scope.row.materialName }}</template>
							</el-table-column>
							<el-table-column label="规格" min-width="100">
								<template #default="scope">{{ scope.row.materialSpecs }}</template>
							</el-table-column>
							<el-table-column label="单位" min-width="60">
								<template #default="scope">{{ scope.row.unitName }}</template>
							</el-table-column>
							<el-table-column label="申请数量" min-width="100">
								<template #default="scope">
									<el-input  v-model="scope.row.recoveryCount" style="width: 100%"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="门店单价" min-width="100">
								<template #default="scope">
									<el-input v-model="scope.row.storePrice" style="width: 100%"
									></el-input>
								</template>
							</el-table-column>

							<el-table-column label="供应商单价" min-width="100">
								<template #default="scope">
									<el-input v-model="scope.row.supplierPrice" style="width: 100%"
									></el-input>
								</template>
							</el-table-column>
							
							<el-table-column label="*收到空瓶数量" min-width="130" prop="remark">
								<template #default="scope">
									<el-input-number disabled v-model="scope.row.recoveryCount2" style="width: 100%" :step="1"
										:min="0" controls-position="right"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="*空瓶有效数量" min-width="130" prop="remark">
								<template #default="scope">
									<el-input-number disabled v-model="scope.row.recoveryCount3" style="width: 100%" :step="1"
										:min="0" controls-position="right"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="*空瓶无效数量" min-width="130" prop="remark">
								<template #default="scope">
									<el-input-number disabled v-model="scope.row.recoveryCount4" style="width: 100%" :step="1"
										:min="0" controls-position="right"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="门店有效金额" min-width="120">
								<template #default="scope">
									<el-input disabled v-model="scope.row.storeTotalAmount" 
										style="width: 100%"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="供应商有效金额" min-width="130">
								<template #default="scope">
									<el-input disabled v-model="scope.row.supplierTotalAmount"
										style="width: 100%"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="*无效原因" min-width="150" prop="remark">
								<template #default="scope">
									<el-input disabled v-model="scope.row.efficiency" style="width: 100%"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="供应商" min-width="200" prop="materialItemId">
								<template #default="scope">
									<el-select  placeholder="---请选择供应商---" v-model="scope.row.recoverySuplyId" style="width: 100%">
										<el-option v-for="item in scope.row.emptiesSupplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
									</el-select>
								</template>
							</el-table-column>
							
							<el-table-column label="门店申请备注" min-width="150" prop="remark">
								<template #default="scope">
									{{scope.row.remark}}
								</template>
							</el-table-column>
							<el-table-column label="空瓶照片" min-width="150">
								<template #default="scope">

                                        <sc-upload-multiple 
											:disabled="true"
                                            v-model="scope.row.recoveryImages"
                                            :objName="'Supply/RevoceryOrder'" 
                                            :uploadType="'OSS'" 
                                            :bucketName="'jtmc'" 
                                            :limit="5"
                                           
                                             />
                                </template>
							</el-table-column>
							<el-table-column label="备注" min-width="150" prop="remark">
								<template #default="scope">
									<el-input v-model="scope.row.reRemark" style="width: 100%"></el-input>
								</template>
							</el-table-column>

						</el-table>
					</el-form-item>
				</el-row>
			</el-form>
			<template #footer>
				<div style="text-align: center;">
					<el-button @click="visible = false">关 闭</el-button>
					<el-button v-if="mode != 'Show'" type="primary" @click="submitSave()">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 选择物料-空瓶 -->
		<template>
			<el-dialog v-model="materialState" title="选择空瓶" :width="1200" :center="true" destroy-on-close append-to-body>
				<sc-empties-choice :queryList="queryMaterialList" ref="scMaterialChoice" ></sc-empties-choice>
				<template #footer >
					<br>
					<el-button @click="materialState = false">取 消</el-button>
					<el-button type="primary" :loading="isSaveing" @click="setMaterialChoice">确定</el-button>
				</template>
			</el-dialog>
		</template>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				mode: '',
				visible: false,
				entityObj: {},
				modalSup: {},
				visibleSup: false,
				backRecoveryCount1: 0,
				backrecoveryCount2: 0,
				materialState: false,
				queryMaterialList:{}
			}
		},
		methods: {
			open(data) {
				this.mode = "Add";
				this.visible = true;
				this.entityObj = data;
				console.log("open",data)
			},
			show(data) {
				this.mode = "Show"
				this.visible = true;
				this.entityObj = data;
				console.log(data)
			},
			deleteRow(index,row) {
				this.entityObj.recoveryOrderItems.splice(index, 1);
			},
			// 从空瓶列表中选中数据返回
			setMaterialChoice() {
				let materials = JSON.parse(JSON.stringify(this.$refs.scMaterialChoice.selectionRows)) // 大型数据结构，频繁使用,可能会导致性能问题
				console.log("物料选择返回",materials);
				materials.forEach(element => {

					var findItem=this.entityObj.recoveryOrderItems.filter(p=>  p.materialItemId==element.materialItemId)[0];
					element.isNew=true
					element.unitName=findItem?.unitName??""
					element.recoverySuplyId = findItem?.recoverySuplyId??0
					element.recoverySuplyName= findItem?.recoverySuplyName??""
					element.emptiesSupplierList= findItem.emptiesSupplierList
					element.recoveryCount = 0
					element.recoverPriceTotal = 0
				});
				this.entityObj.recoveryOrderItems = [...this.entityObj.recoveryOrderItems,...materials] // 特殊业务可以重复添加

				console.log("新recoveryOrderItems",this.entityObj.recoveryOrderItems);

				this.$refs.scMaterialChoice.clearSelectionFun();
				this.materialState = false;
			},
			addMaterial() {

				var materialItemIds=this.entityObj.recoveryOrderItems.map(item=>{
					return item.materialItemId
				});
				console.log("materialItemIds",materialItemIds)
				this.queryMaterialList={StoreId:this.entityObj.storeId,MaterialItemIds:materialItemIds};
				console.log("queryMaterialList",this.queryMaterialList)
				this.materialState = true;
				this.$nextTick(() => {
					
					this.$refs.scMaterialChoice.initMaterialType('23', false); //空瓶
				})
				
			},
			async submitSave() {
				console.log(this.entityObj);
				try {
					const returnValue = await this.$API.auth.PostProcessApi.post(
						"recovery-order/auditRecoveryOrder",
						this.entityObj
					);
					if (returnValue.status == 200) {
						this.$message.success(returnValue.msg);
						this.$emit("success");
						this.visible = false;
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}
				} catch (error) {
					this.loading = false;
					this.$message.error(error.message);
					return false;
				}
			}
		}
	}
</script>

<style scoped>
/deep/ .el-upload--picture-card{
    width: 50px;
    height: 50px;
}
/deep/ .el-upload{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-table .info-row > td 
{
    background:#e4e7ed;
    user-select: none; /* 禁用文本选择 */
    pointer-events: none; /* 禁用鼠标事件 */


}
</style>
